<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AceHub</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="../header-footer/common.css">
    <link rel="stylesheet" href="courseList.css">
</head>
 <style>
.course-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.course-card {
  display: flex;
  flex-direction: row;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.2s ease;
  max-width: 100%;
}

.course-card:hover {
  transform: scale(1.01);
}

/* 图片区域：占30% */
.course-image {
  flex: 0 0 30%;
  height: 140px; /* ✅ 设置固定高度，适当缩小 */
  position: relative;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 分类标签 */
.course-category-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background-color: rgba(0, 123, 255, 0.9);
  color: white;
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  height: 20px;         /* ✅ 控制标签高度 */
  display: flex;
  align-items: center;  /* ✅ 垂直居中文字 */
  border-radius: 4px;
  white-space: nowrap;
}


/* 文字区域：占70%，顶部对齐 */
.course-info {
  flex: 0 0 70%;
  padding: 12px 18px;  /* ✅ 缩小内边距 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 140px;  /* ✅ 保证和图片等高对齐 */
}

/* 标题 */
.course-info h2 {
  margin: 0;
   text-align: left;
  font-size: 20px;
  color: #333;
  line-height: 1.4;
}

/* 教师名 */
.course-info p {
    text-align: left;
  margin: 6px 0 14px;
  font-size: 14px;
  color: #777;
}

/* 元信息（注册人数、点赞、时间） */
.course-meta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #999;
  margin-top: auto; /* 靠下放 */
}

.meta-item i {
  margin-right: 5px;
  color: #f56c6c;
}




        .category:not(:last-child) {
            border-bottom: 1px dashed #ccc;
            padding-bottom: 12px;
            margin-bottom: 12px;
        }
    </style>
<body>
    <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <!-- TODO 补充链接 -->
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="./courseList.html">course</a></li>
                    <li><a href="./league.html">Alliance colleges</a></li>
                    <li><a href="./about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- TODO 补充链接 -->
        </div>
    </header>

    <main>
        <div class="category-container">

            <div class="category">
                <span class="category-title">Course classification:</span>
                <button class="category-option first-button active" data-category="all">all</button>
                <button class="category-option" data-category="Science and Engineering">Science and Engineering</button>
                <button class="category-option" data-category="computer">computer</button>
                <button class="category-option" data-category="Education and Language">Education and Language</button>
                <button class="category-option" data-category="Literature and Art">Literature and Art</button>
                <!-- <button class="category-option" data-category="Entrepreneurship and Workplace">Entrepreneurship and Workplace</button>
                <button class="category-option" data-category="Philosophy, History, and Culture">Philosophy, History, and Culture</button>
                <button class="category-option" data-category="Economy and Management">Economy and Management</button>
                <button class="category-option" data-category="medicine">medicine</button> -->
                <!-- 其余类别继续添加 -->
            </div>

            <div class="category">
                <span class="category-title">Sorting criteria:</span>
                <button class="sort-option" data-sort="registerCount">Enrollment</button>
                <button class="sort-option" data-sort="created_at">Release time</button>
                <button class="sort-option" data-sort="updated_at">update time</button>
                <button class="sort-option" data-sort="likes">Number of collectors</button>
            </div>

            <div class="category">
                <!-- <span class="category-title">Sorting direction:</span> -->
                <button id="toggleSortOrder" data-order="desc">descending order</button>
            </div>

        </div>


        <!-- <div class="divider"></div> -->
        <!-- 各课程列表 -->
        <div class="courses-container">
            <div class="course-list"></div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const buttons = document.querySelectorAll('.course-titles button');

                // // 初始化默认激活按钮
                // document.querySelector('.recommended-courses button').classList.add('active');

                buttons.forEach(button => {
                    button.addEventListener('click', function () {
                        // 移除所有按钮的激活状态
                        buttons.forEach(btn => btn.classList.remove('active'));
                        // 激活被点击的按钮
                        this.classList.add('active');
                    });
                });
            });

            document.querySelectorAll('.category').forEach(category => {
                category.addEventListener('click', function (event) {
                    if (event.target.classList.contains('category-option')) {
                        let buttons = category.querySelectorAll('.category-option');
                        buttons.forEach(button => button.classList.remove('active'));
                        event.target.classList.add('active');
                    }
                });
            });
        </script>

    </main>


    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="#home"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                        <li><a href="privacy.html">Privacy Policy</a></li>
                        <li><a href="terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="../database.js"></script>
    <script src="../account/account.js"></script>
    <script src="../header-footer/navigation.js"></script>
    <script src="courseList.js"></script>
    <!-- <script src="Homepage.js"></script> -->


    <!--页眉js-->
    <script>
        //Retrieve user information based on token
window.onload = function () {
const userid = localStorage.getItem('token');
//If a user logs in, display their profile picture in the info div; if not, display the login and registration button
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
document.querySelector('.info').innerHTML = `
                    <a href="${userid === 'teacher' ? '../teacher/teacher-profile.html' : '../student/student-profile.html'}">
                        <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                    <div class="card">
                        <ul>
                            <li><a href="${userid === 'teacher' ? '../teacher/teacher-profile.html' : '../student/student-profile.html'}">
                                ${userid=='teacher'? 'Personal Center': 'My Learning'}</a></li>
                             <li><a href="${userid === 'teacher' ? '../account/teacher-setting.html' : '../account/student-setting.html'}">
                                ${userid=='teacher'? 'Account Settings':' Account Settings'}</a></li>
                        
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                //如果点击退出登录，清除token
                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = '../Homepage/WebsiteHomepage.html';
                });
            }
            else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        }
    </script>

</body>

</html>